<template>
    <div>
        <div class="fixed w-full flex items-center justify-between h-14 text-white z-10 bg-gray-700">
            <div
                class="flex items-center justify-start md:justify-center pl-3 w-14 md:w-64 h-14 bg-gray-700 dark:bg-gray-800 border-none">
                <i class="iconfont icon-GooglePlaylogo w-12"></i>
                <span class="hidden md:block">语沐后台管理系统</span>
            </div>
            <div class="flex w-full justify-evenly items-center h-14 bg-gray-700 dark:bg-gray-700">
                <div class="flex w-3/4"></div>

                <div class="flex w-1/4">
                    <div class="flex w-3/4 ">
                        <el-input placeholder="请输入文章内容" @focus="search"></el-input>
                    </div>
                    <div class="flex w-1/4 mx-auto ml-3">
                        <el-dropdown>
                            <el-avatar src="/static/images/avatar.png"></el-avatar>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人资料</el-dropdown-item>
                                <el-dropdown-item>{{ $store.state.admin.name }}</el-dropdown-item>
                                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    async logout() {
        await axios.post('admin/logout');
        localStorage.removeItem('token')
        // 重新刷新页面，发现缺少token，路由拦截直接返回到login页面
        this.$router.go(0)
    },
    methods: {
        search() {
            this.$router.push({path: '/admin/admin/search'})
        }
    }
}
</script>


<style>

</style>
